<template>
  <view class="order">
    <i-statusBar></i-statusBar>
    <view class="order_header">
      <text>充电宝收益</text>
    </view>
    <i-moveSwiper
      :isScroll="false"
      @change="currentChange"
      v-model="currentPage"
      :scrollList="scrollList"
      :viewStyleData="{
        activeColor: '#FF9400'
      }"
      padding="12rpx 0"
      size="28"
    >
      <template #0>
				<Composite :userInfo="userInfo" :orderStatistics="orderStatistics"></Composite>
      </template>
      <template #1>
				<Income :userInfo="userInfo"></Income>
      </template>
      <template #2>
        <Device :userInfo="userInfo"></Device>
      </template>
    </i-moveSwiper>
  </view>
</template>

<script lang="ts" setup>
import Composite from "./components/composite.vue";
import Income from "./components/income.vue";
import Device from "./components/device.vue";
import { onLoad, onUnload, onShow } from "@dcloudio/uni-app";
import { computed, ref } from "vue";
import useStore from "../../stores/index";
const url = ref("");
const currentPage = ref(0);
const store = useStore();
const orderStatistics = ref<any[]>([]);
const userInfo = computed(() => store.userInfo) as any;


const scrollList: Array<{
  title: string;
  id: "0" | "1" | "2" | "3";
}> = [
  
  {
    title: "综合",
    id: "0",
  },
  {
    title: "收益",
    id: "1",
  },
  {
    title: "设备",
    id: "2",
  },
];

onShow(() => {
  orderStatistics.value = [
    { name: "创建订单数", value: userInfo.value.deviceIncomeTotal },
    { name: "成功订单数", value: userInfo.value.deviceIncomeTotal },
    { name: "成功订单金额", value: userInfo.value.deviceIncomeYesterday },
    { name: "成功订单收益", value: "0.0" },
    { name: "弹出失败数", value: 0 },
    { name: "退款订单数", value: 0 },
    { name: "退款订单金额", value: "0.0" },
    { name: "成功购买订单数", value: 0 },
    { name: "5分钟内订单数", value: 0 },
    { name: "优惠券订单数", value: 0 },
    { name: "平均客单价", value: "0.0" },
    { name: "扫码人数", value: 0 },
    { name: "扫码次数", value: 0 },
    { name: "无网络扫码数", value: 0 },
  ];
});


onLoad((option) => {
  url.value = option.url;
});

const currentChange = () => {};
</script>

<style lang="scss" scoped>
.order_header {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #000;
  // padding-top: calc(var(--status-bar-height) + 10px);
}
.order {
  width: 100%;
  height: 100%;
  background: url(../../static/images/user_bg.png) top center no-repeat;
  background-size: 100% 580rpx;
  background-position: top;
  background-color: #f5f5f5;
  overflow: hidden;

}
</style>
